<template>
  <div>
    <div>
      <a-form
        @submit="handleSubmit"
        style="margin-top: 8px; width: 80%; margin: 0 auto"
        :form="form"
      >
        <div v-for="(item, index) in bfyArr" :key="item.id">
          <a-row>
            <a-col :xs="{ span: 24 }" :sm="{ span: 7 }" class="formGroupTitle"
              >受益人{{ index + 1 }}</a-col
            >
            <a-col :xs="{ span: 24 }" :sm="{ span: 16 }"
              ><div class="tips">
                <a v-if="index == 0" @click="toSetLegal(index)">同法人</a>
                <a-button v-else @click="deleteBfy(index)">删除</a-button>
              </div></a-col
            >
          </a-row>
          <a-form-item v-bind="formItemLayout" label="姓名">
            <a-input
              v-decorator="[
                'beneficiaryname' + index,
                { rules: [{ required: true, message: '请输入姓名' }] },
              ]"
              placeholder="请输入姓名"
              @change="(e) => nameChangeBfy(e, index)"
            />
          </a-form-item>

                  <!-- add 国籍 -->
        <a-form-item v-bind="formItemLayout" label="国籍">
                 <div>
            <a-select
              disabled
              class="width-sty"
              v-model="nation"
            >
              <a-select-option value="中国">中国</a-select-option>
              
            </a-select>
          </div>
     
        </a-form-item>
          <a-form-item v-bind="formItemLayout" label="证件类型">
            <div>
              <a-select
                disabled
                class="width-sty"
                v-decorator="[
                  'beneficiaryidType' + index,
                  { rules: [{ required: true, message: '请选择证件类型' }] },
                ]"
                placeholder="请选择证件类型"
                @change="(value) => idTypeChangeBfy(value, index)"
                initialValue="identity_card"
              >
                <a-select-option value="identity_card">身份证</a-select-option>
                <a-select-option value="passport">护照</a-select-option>
                <a-select-option value="hk_ma_tai_pass"
                  >港澳台通行证</a-select-option
                >
                <a-select-option value="taiwan_pass"
                  >台湾居民来往大陆通行证</a-select-option
                >
                <a-select-option value="soldier_certificate"
                  >军官证</a-select-option
                >
                <a-select-option value="household_register"
                  >户口簿</a-select-option
                >
              </a-select>
            </div>
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="证件号码">
            <a-input
              v-decorator="[
                'beneficiaryidNo' + index,
                { rules: [{ required: true, message: '请输入证件号码' }] },
              ]"
              placeholder="请输入证件号码"
              @change="(e) => idChange(e, index)"
            />
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="证件有效期">
            <a-date-picker
              :disabledDate="disabledDate"
              placeholder="请选择证件有效期"
              @change="
                (date, dateString) => dateChangeBfy(date, dateString, index)
              "
              v-decorator="[
                'beneficiaryexpiryDate' + index,
                {
                  rules: [{ required: true, message: '请选择证件有效期' }],
                },
              ]"
            />
            <span @click="tolong(index)" style="color: #1478d5; cursor: pointer"
              >&nbsp; 长期</span
            >
          </a-form-item>
          <a-form-item v-bind="formItemLayout1" label="地址">
            <div>
              <span>所属地区</span>
              <a-cascader
                class="width-sty1"
                :options="options"
                v-decorator="[
                  'region' + index,
                  { rules: [{ required: true, message: '请选择所属地区' }] },
                ]"
                placeholder="请选择所属地区"
                @change="
                  (value, selectedOptions) =>
                    handleChangeRegion(value, selectedOptions, index)
                "
              >
              </a-cascader>
              <span
                v-if="index == 0"
                @click="toAddress(index)"
                style="color: #1478d5; cursor: pointer"
                >&nbsp; 同实际经营地址
              </span>
              <br />
              <a-form-item>
                <span style="margin-right: 4px;">详细地址</span>
                <a-input
                  @change="(e) => addressChange(e, index)"
                  class="width-sty1"
                  v-decorator="[
                    'address' + index,
                    { rules: [{ required: true, message: '请输入详细地址' }] },
                  ]"
                  placeholder="请输入详细地址"
                />
              </a-form-item>
            </div>
          </a-form-item>
          <a-form-item
            v-bind="formItemLayout"
            :label="`受益所有人${index + 1}证件照片`"
          >
            <div class="clearfix" style="display: inline-block">
              <a-upload
                v-decorator="[
                  'uploadBfy' + index,
                  {
                    rules: [
                      { required: false, message: '请上传身份证正/反面!' },
                    ],
                  },
                ]"
                action="/file/file/upload"
                listType="picture-card"
                :headers="henderstoken"
                :data="{ to }"
                name="upfile"
                :fileList="item.fileList"
                @preview="(file) => handlePreviewBfy(file, index, 'A')"
                @change="(value) => handleChangeBfy(value, index, 'A')"
              >
                <div v-if="item.fileList.length < 1">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">身份证正面</div>
                </div>
              </a-upload>
              <a-modal
                :visible="item.previewVisible"
                :footer="null"
                @cancel="handleCancel(index, 'A')"
              >
                <img
                  alt="example"
                  style="width: 100%"
                  :src="item.previewImage"
                />
              </a-modal>
            </div>
            <div class="clearfix" style="display: inline-block">
              <a-upload
                :data="{ to }"
                :headers="henderstoken"
                name="upfile"
                action="/file/file/upload"
                listType="picture-card"
                :fileList="item.fileList2"
                @preview="(file) => handlePreviewBfy(file, index, 'B')"
                @change="(value) => handleChangeBfy(value, index, 'B')"
              >
                <div v-if="item.fileList2.length < 1">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">身份证反面</div>
                </div>
              </a-upload>
              <a-modal
                :visible="item.previewVisible2"
                :footer="null"
                @cancel="handleCancel(index, 'B')"
              >
                <img
                  alt="example"
                  style="width: 100%"
                  :src="item.previewImage2"
                />
              </a-modal>
            </div>
          </a-form-item>
        </div>
        <a-row>
          <a-col :xs="{ span: 24 }" :sm="{ span: 9 }" class="formGroupTitle"
            ><a-button @click="addBeneficiary" class="addButton" type="primary"
              >新增</a-button
            ></a-col
          >
        </a-row>
        <a-row>
          <a-col :xs="{ span: 24 }" :sm="{ span: 16, offset: 8 }">
            <!--:loading="loading3"-->
            <a-form-item>
              <a-button class="submitButton" html-type="submit" type="primary"
                >下一步</a-button
              >
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </div>
</template>
<script>
import Result from "@/components/result/Result";
import moment from "moment";
import api from "@/common/api";
import { mapState, mapMutations, mapAction } from "vuex";
export default {
  components: {
    Result,
  },
  data() {
    return {
      date: "",
      nation: '中国',

      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 7 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 13, offset: 1 },
          md: { span: 10, offset: 1 },
        },
      },
      formItemLayout1: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 7 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16, offset: 1 },
          md: { span: 12, offset: 1 },
        },
      },
      henderstoken: {
        Authorization: localStorage.getItem("token"),
      },
      to:
        sessionStorage.getItem("memberNo") +
        "_" +
        sessionStorage.getItem("userNameLogin"),
      previewVisible1: false,
      previewVisible2: false,
      previewVisible3: false,
      previewImage1: "",
      previewImage2: "",
      previewImage3: "",
      fileList1: [],
      fileList2: [],
      fileList3: [],
      fileListBfy: {},
      options: [],
      bfyArr: [
        // {
        //   id: 1,
        //   fileList: [],
        //   fileList2: [],
        //   previewVisible: false,
        //   previewImage: "",
        //   previewVisible2: false,
        //   previewImage2: "",
        // },
      ],
      count: 1,
      logIdentity: [],
      logBenefitOwnerAddRequests: [],
      imgList: [],
      otherList: [],
    };
  },
  computed: {
    ...mapState({
      imageSize: (state) => state.imageSize,
    }),
  },
  created() {
    let orgAMemberNo = sessionStorage.getItem("orgAMemberNo");
    console.log("orgAMemberNo", orgAMemberNo);
    if (orgAMemberNo) {
      this.getExistData(orgAMemberNo);
    } else {
      this.dataModify();
    }
  },
  mounted() {
    this.getareaData();
  },
  methods: {
    moment,
    disabledDate(current) {
      // Can not select days before today and today
      return current && current < moment().endOf("day");
    },
    getExistData(memberNo) {
      this.$axios
        .get("/agent/merchant/network/fetch/step4/" + memberNo)
        .then((res) => {
          if (res.data.code == "OK") {
            console.log("lffaw", res.data.data.benefitList);
            if (res.data.data.benefitList) {
              this.logBenefitOwnerAddRequests = res.data.data.benefitList;
              this.dataModify();
            } else {
              this.logBenefitOwnerAddRequests = [];
              this.dataModify();
            }
          } else {
            this.logBenefitOwnerAddRequests = [];
          }
        });
    },
    dataModify() {
      console.log(this.logBenefitOwnerAddRequests);
      var arr = [];
      for (let i = 0; i < this.logBenefitOwnerAddRequests.length; i++) {
        var obj = {
          identityName: this.logBenefitOwnerAddRequests[i].identityName,
          identityNo: this.logBenefitOwnerAddRequests[i].identityNo,
          id_type: this.logBenefitOwnerAddRequests[i].idType,
          expiryDate: this.logBenefitOwnerAddRequests[i].expiryDate,
          address: this.logBenefitOwnerAddRequests[i].address,
          provinceName: this.logBenefitOwnerAddRequests[i].provinceName,
          province: this.logBenefitOwnerAddRequests[i].province,
          cityName: this.logBenefitOwnerAddRequests[i].cityName,
          city: this.logBenefitOwnerAddRequests[i].city,
          districtName: this.logBenefitOwnerAddRequests[i].districtName,
          district: this.logBenefitOwnerAddRequests[i].district,
          subIndex: this.logBenefitOwnerAddRequests[i].subIndex,
          upload: this.logBenefitOwnerAddRequests[i].imgHead,
          upload2: this.logBenefitOwnerAddRequests[i].imgEmblem,
          fileList: [],
          fileList2: [],
          previewVisible: false,
          previewVisible2: false,
        };
        if (this.logBenefitOwnerAddRequests[i].imgHead) {
          obj.fileList.push({
            uid: "-1",
            name: "xxx.png",
            status: "done",
            url:
              "/file/file/download/" +
              this.logBenefitOwnerAddRequests[i].imgHead,
          });
        }
        if (this.logBenefitOwnerAddRequests[i].imgEmblem) {
          obj.fileList2.push({
            uid: "-1",
            name: "xxx.png",
            status: "done",
            url:
              "/file/file/download/" +
              this.logBenefitOwnerAddRequests[i].imgEmblem,
          });
        }
        arr.push(obj);
      }
      this.bfyArr = arr;
      if (this.bfyArr.length == 0) {
        this.bfyArr = [
          {
            id: 1,
            fileList: [],
            fileList2: [],
            previewVisible: false,
            previewImage: "",
            previewVisible2: false,
            previewImage2: "",
            id_type: "identity_card",
          },
        ];
        this.$nextTick(function () {
          this.form.setFieldsValue({
            beneficiaryidType0: "identity_card",
          });
        });
      } else {
        this.setData();
      }
      console.log("111", this.bfyArr);
    },
    setData() {
      this.$nextTick(function () {
        for (var i = 0; i < this.bfyArr.length; i++) {
          this.form.setFieldsValue({
            ["beneficiaryname" + (() => i)()]: this.bfyArr[i].identityName,
            ["beneficiaryidType" + (() => i)()]: this.bfyArr[i].id_type,
            ["beneficiaryidNo" + (() => i)()]: this.bfyArr[i].identityNo,
            ["beneficiaryexpiryDate" + (() => i)()]: moment(
              this.bfyArr[i].expiryDate
            ),
            ["region" + (() => i)()]: [
              this.bfyArr[i].province,
              this.bfyArr[i].city,
              this.bfyArr[i].district,
            ],
            ["address" + (() => i)()]: this.bfyArr[i].address,
            ["uploadBfy" + (() => i)()]: this.bfyArr[i].upload,
          });
        }
      });
    },

    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        console.log("1", values);
        console.log("2", err);
        if (!err) {
          let memberNo = sessionStorage.getItem("orgAMemberNo");
          let logBenefitOwnerAddRequests = [];
          for (var i = 0; i < this.bfyArr.length; i++) {
            let obj = {
              identityName: this.bfyArr[i].identityName,
              identityNo: this.bfyArr[i].identityNo,
              id_type: this.bfyArr[i].id_type,
              expiryDate: this.bfyArr[i].expiryDate,
              address: this.bfyArr[i].address,
              provinceName: this.bfyArr[i].provinceName,
              province: this.bfyArr[i].province,
              cityName: this.bfyArr[i].cityName,
              city: this.bfyArr[i].city,
              districtName: this.bfyArr[i].districtName,
              district: this.bfyArr[i].district,
              subIndex: i,
              memberNo: memberNo,
              nation:this.nation
            };
            if (this.bfyArr[i].fileList.length > 0) {
              if (this.bfyArr[i].fileList[0].response) {
                obj.imgHead = this.bfyArr[i].fileList[0].response.data;
              } else {
                obj.imgHead = this.bfyArr[i].upload;
              }
            } else {
              obj.imgHead = "";
            }
            if (this.bfyArr[i].fileList2.length > 0) {
              if (this.bfyArr[i].fileList2[0].response) {
                obj.imgEmblem = this.bfyArr[i].fileList2[0].response.data;
              } else {
                obj.imgEmblem = this.bfyArr[i].upload2;
              }
            } else {
              obj.imgEmblem = "";
            }
            logBenefitOwnerAddRequests.push(obj);
          }
          let data = logBenefitOwnerAddRequests;

          console.log("data", data);
          this.$axios
            .post("/agent/merchant/network/addBenefit", data)
            .then((res) => {
              if (res.data.code == "OK") {
                this.doNext(3);
              } else {
                if (res.data.code == "RISK_VALUE") {
                  this.$message.warning(res.data.message);
                  return;
                }
                if (res.data.code == "二要素认证不通过") {
                  this.$message.warning("授权办理人信息验证不通过！");
                  return;
                }
                this.$message.error(res.data.message);
              }
            });
        }
      });
    },
    doNext(step) {
      var st = step + 1;
      this.$router.push("/OrgRegister/configureA/step" + st);
    },
    addBeneficiary() {
      this.count = this.count + 1;
      this.bfyArr.push({
        id: this.count,
        fileList: [],
        fileList2: [],
        previewVisible: false,
        previewImage: "",
        previewVisible2: false,
        previewImage2: "",
        id_type: "identity_card",
      });
      this.$nextTick(function () {
        for (var i = 0; i < this.bfyArr.length; i++) {
          this.form.setFieldsValue({
            ["beneficiaryidType" + (() => i)()]: this.bfyArr[i].id_type,
          });
        }
      });
      console.log(this.bfyArr);
    },
    tolong(index) {
      this.form.setFieldsValue({
        ["beneficiaryexpiryDate" + index]: moment("9999-01-01"),
      });
      this.bfyArr[index].expiryDate = "9999-01-01";
    },
    deleteBfy(index) {
      this.bfyArr.splice(index, 1);
      console.log(this.bfyArr);
      this.$nextTick(function () {
        for (var i = 0; i < this.bfyArr.length; i++) {
          console.log(["beneficiaryname" + (() => i)()]);
          this.form.setFieldsValue({
            ["beneficiaryname" + (() => i)()]: this.bfyArr[i].identityName,
            ["beneficiaryidType" + (() => i)()]: this.bfyArr[i].id_type,
            ["beneficiaryidNo" + (() => i)()]: this.bfyArr[i].identityNo,

            ["address" + (() => i)()]: this.bfyArr[i].address,
            ["uploadBfy" + (() => i)()]: this.bfyArr[i].imgHead,
          });
          if (this.bfyArr[i].province) {
            this.form.setFieldsValue({
              ["region" + (() => i)()]: [
                this.bfyArr[i].province,
                this.bfyArr[i].city,
                this.bfyArr[i].district,
              ],
            });
          }
          if (this.bfyArr[i].expiryDate) {
            this.form.setFieldsValue({
              ["beneficiaryexpiryDate" + (() => i)()]: moment(
                this.bfyArr[i].expiryDate
              ),
            });
          }
        }
      });
      console.log(this.bfyArr);
    },
    nameChangeBfy(e, index) {
      this.bfyArr[index].identityName = e.target.value;
    },
    addressChange(e, index) {
      this.bfyArr[index].address = e.target.value;
    },
    idTypeChangeBfy(value, index) {
      this.bfyArr[index].id_type = value;
    },
    idChange(e, index) {
      console.log(e.target.value, index);
      this.bfyArr[index].identityNo = e.target.value;
    },
    dateChange(date, dateString) {
      console.log("dateString", dateString);
      this.date = dateString;
      // this.expiryDate = dateString;
    },
    dateChangeBfy(date, dateString, index) {
      console.log(date, dateString, index);
      this.bfyArr[index].expiryDate = dateString;
    },
    handleChangeRegion(value, selectedOptions, index) {
      console.log(value, selectedOptions, index);
      this.bfyArr[index].provinceName = selectedOptions[0].label;
      this.bfyArr[index].province = selectedOptions[0].value;
      this.bfyArr[index].cityName = selectedOptions[1].label;
      this.bfyArr[index].city = selectedOptions[1].value;
      this.bfyArr[index].districtName = selectedOptions[2].label;
      this.bfyArr[index].district = selectedOptions[2].value;
      console.log(this.bfyArr);
    },
    handleChangeBfy({ file, fileList }, index, type) {
      console.log(file, fileList, index, type);
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传文件仅支持 jpg、 png 格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb`);
        return;
      }
      if (type == "A") {
        this.bfyArr[index].fileList = fileList;
      } else {
        this.bfyArr[index].fileList2 = fileList;
      }
      // 根据服务端返回数据筛选上传成功的文件
      let imgUrls = [];
      fileList.forEach((file) => {
        if (file.response && file.response.code === "0") {
          console.log(file);
          imgUrls.push(file.response.data.fileInfo.url);
        }
      });
    },
    handlePreviewBfy(file, index, type) {
      console.log(file, index, type);
      if (type == "A") {
        this.bfyArr[index].previewImage = file.url || file.thumbUrl;
        this.bfyArr[index].previewVisible = true;
      } else {
        this.bfyArr[index].previewImage2 = file.url || file.thumbUrl;
        this.bfyArr[index].previewVisible2 = true;
      }
      // this.previewVisible1 = true;
    },
    handlePreview1(file) {
      console.log("file", file);
      this.previewImage1 = file.url || file.thumbUrl;
      this.previewVisible1 = true;
    },
    handlePreview2(file) {
      this.previewImage2 = file.url || file.thumbUrl;
      this.previewVisible2 = true;
    },
    handlePreview3(file) {
      this.previewImage3 = file.url || file.thumbUrl;
      this.previewVisible3 = true;
    },
    handleCancel(index, type) {
      if (type == "A") {
        this.bfyArr[index].previewVisible = false;
      } else {
        this.bfyArr[index].previewVisible2 = false;
      }
    },
    handleCancel1() {
      this.previewVisible1 = false;
    },
    handleCancel2() {
      this.previewVisible2 = false;
    },
    handleCancel3() {
      this.previewVisible3 = false;
    },
    getareaData() {
      this.$axios.get("/agent/division/all").then((res) => {
        const result = res.data;
        if (res.data.list) {
          let list = result.list;
          let arr = [];
          let newArr = list.map((item, index, list) => {
            let test = {
              label: item.label,
              value: item.value,
              children: [],
            };
            arr.push(test);
            if (item.children) {
              let children = [];
              for (let i = 0; i < item.children.length; i++) {
                let test2 = {
                  label: item.children[i].label,
                  value: item.children[i].value,
                  children: [],
                };
                children.push(test2);

                if (item.children[i].children) {
                  let child2 = [];
                  for (let a = 0; a < item.children[i].children.length; a++) {
                    let test3 = {
                      label: item.children[i].children[a].label,
                      value: item.children[i].children[a].value,
                    };
                    child2.push(test3);
                  }
                  children[i].children = child2;
                }
              }
              arr[index]["children"] = children;
            }
            return arr;
          });
          // console.log("newArr", newArr);
          this.options = newArr[0];
          localStorage.setItem("areaDataLocal", JSON.stringify(this.options));
         
        } else {
        }
      });
    },
    getFileDownload(value) {
      let data = value;
      api.getFilePath(
        data,
        (res) => {
          console.log(res);
          if (res.code == "OK") {
            const a = document.createElement("a");
            a.download = `授权委托书（单位客户）.doc`;
            let downloadUrl = "/file/file/download/" + res.data;
            a.href = downloadUrl;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    toSetLegal(index) {
      //   let legalInfo = JSON.parse(sessionStorage.getItem("legalInfo"));
      let legalImgHead = sessionStorage.getItem("identityimgHead");
      let legalImgEmblem = sessionStorage.getItem("identityimgEmblem");
      let identityName = sessionStorage.getItem("identityName");
      let identityType = sessionStorage.getItem("identityType");
      let identityNo = sessionStorage.getItem("identityNo");

      let expiryDate = sessionStorage.getItem("expiryDate");
      this.form.setFieldsValue({
        beneficiaryname0: identityName,
        beneficiaryidType0: "identity_card",
        beneficiaryidNo0: identityNo,
        beneficiaryexpiryDate0: moment(expiryDate),
        uploadBfy0: legalImgHead,
      });
      this.bfyArr[0].identityName = identityName;
      this.bfyArr[0].id_type = "identity_card";
      this.bfyArr[0].identityNo = identityNo;
      this.bfyArr[0].expiryDate = expiryDate;
      this.bfyArr[0].upload = legalImgHead;
      this.bfyArr[0].upload2 = legalImgEmblem;
      this.bfyArr[0].fileList = [
        {
          uid: "-1",
          name: "xxx.png",
          status: "done",
          url: "/file/file/download/" + legalImgHead,
        },
      ];
      this.bfyArr[0].fileList2 = [
        {
          uid: "-1",
          name: "xxx.png",
          status: "done",
          url: "/file/file/download/" + legalImgEmblem,
        },
      ];
      console.log(this.bfyArr);
    },
    toAddress(index) {
      let realProvince = sessionStorage.getItem("realProvince");
      let realCity = sessionStorage.getItem("realCity");
      let realDistrict = sessionStorage.getItem("realDistrict");
      let realProvinceName = sessionStorage.getItem("realProvinceName");
      let realCityName = sessionStorage.getItem("realCityName");
      let realDistrictName = sessionStorage.getItem("realDistrictName");
      let realAddress = sessionStorage.getItem("realAddress");
      this.form.setFieldsValue({
        region0: [realProvince, realCity, realDistrict],
        address0: realAddress,
      });
      this.bfyArr[0].districtName = realDistrictName;
      this.bfyArr[0].district = realDistrict;
      this.bfyArr[0].cityName = realCityName;
      this.bfyArr[0].city = realCity;
      this.bfyArr[0].provinceName = realProvinceName;
      this.bfyArr[0].province = realProvince;
      this.bfyArr[0].address = realAddress;
    },
  },
};
</script>
<style lang="scss" scoped>
.ant-input {
  width: 50%;
}

.btn-sty {
  background-color: #ccc;
  border: 1px solid #ccc;
  color: #333;
}

.formGroupTitle {
  font-size: 20px;
  font-weight: bold;
  text-align: right;
  margin-bottom: 10px;
}
.tips {
  margin-left: 20px;
  height: 30px;
  line-height: 30px;
}
.text-div {
  text-align: center;
}

.text-div button {
  margin: 0 10px;
}

.width-sty {
  width: 50%;
}
.width-sty1 {
  width: 40%;
}
.w-sty {
  width: 80%;
}

.result {
  color: red;
  text-align: center;
}

.submitButton {
  margin-top: 50px;
  width: 10vw;
}
.addButton {
  width: 100px;
}
</style>

